@import '../../mixins'

.Separator
  box(relative)

// ---
// -- Body
// -
.Separator .body
  box(relative, flex)
  height: var(--bookmarks-separator-height)
  align-items: center
  cursor: pointer
  transform: translateZ(0)
  transition: opacity var(--d-fast)
  &:after
    content: ''
    box(absolute)
    pos(calc(50% - 2px), calc(50% - 16px))
    size(32px, 4px)
    border-radius: 2px
    background-color: #00000012
    box-shadow: inset 0 0 0 1px #00000036

.Separator:not([data-selected]) .body:hover:after
  background-color: #00000024

.Separator:not([data-selected]) .body:active:after
  background-color: #00000024

.Separator[data-selected] .body:after
  background-color: var(--tabs-selected-bg)

// ---
// -- Drag layer
// -
.Separator .drag-layer
  box(absolute)
  size(100%, same)
  pos(0, 0)
  z-index: 15
